<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>安邦定国</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1435664_hziivks4by4.css">
    <style>
        body,
        html {
            background-color: #f2f2f2;
            min-width: 1254px;
            width: 100%;
            height: 100%;
            min-height: 650px;
        }

        header {
            width: 84%;
            height: 7%;
            float: right;
            background: #fff;
            /* border-bottom: 1px solid #ededed; */
            box-shadow: 0px 1px 2px #ededed;
        }

        header p {
            width: 100%;
            font: 13px/50px "Avenir, Helvetica, Arial, sans-serif";
            color: rgb(105, 105, 105);
        }

        header p span {
            float: right;
            margin-right: 20px;
            cursor: pointer;
        }

        nav {
            width: 16%;
            height: 100%;
            min-width: 200px;
            float: left;
            background-color: #20222a;
        }

        nav .navLiangZi {
            width: 100%;
            height: 7%;
            box-sizing: border-box;
            background-color: #f5f7fa;
        }

        nav .navLiangZi img {
            width: 50%;
            height: 33px;
            display: block;
            margin: 0 auto;
        }

        nav li {
            position: relative;
        }

        nav li .axis {
            position: absolute;
            width: 4px;
            height: 50px;
            left: 0;
            background-color: #3c9688;
            display: none;
        }

        nav a,
        nav p {
            color: rgb(204, 204, 204);
            display: block;
            height: 50px;
            font: 15px/50px "Avenir, Helvetica, Arial, sans-serif";
            cursor: pointer;
        }

        nav .FLColumn li a:hover,
        nav .FLColumn li p:hover {
            color: #fff !important;
        }

        nav .FLColumn a,
        nav .FLColumn p {
            padding-inline-start: 40px;
        }

        nav .FLColumn span {
            margin-right: 10px;
        }

        nav .FLColumn .SLColumn a {
            padding-inline-start: 60px;
        }

        nav .FLColumn #right {
            margin-left: 30px;
        }

        iframe {
            width: 84%;
            height: 93%;
            float: right;
            box-sizing: border-box;
            padding-top: 2px;
        }
    </style>
</head>

<body>
    <header>
        <p>
            <span class="quit">退出</span><span>安邦定国</span>
        </p>
    </header>
    <nav>
        <div class="navLiangZi">
            <div style="height: 5px"></div>
            <img src="./img/logo.png" alt=""></div>
        <ul class="FLColumn">
            <li>
                <div class="axis"></div><a href="javascript:void(0)" id="home"><span
                        class="icon iconfont icon-shouye"></span>首页</a>
            </li>
            <li>
                <div class="axis"></div><a href="javascript:void(0)" id="school" class="limit" value="院校管理"><span
                        class="icon iconfont icon-xuexiao"></span>院校管理</a>
            </li>
            <li>
                <div class="axis"></div><a href="javascript:void(0)" id="student" class="limit" value="学生管理"><span
                        class="icon iconfont icon-xueshengguanli"></span>学生管理</a>
            </li>
            <li>
                <div class="axis"></div><a href="javascript:void(0)" id="performance" class="limit" value="业绩管理"><span
                        class="icon iconfont icon-yejiguanli"></span>业绩管理</a>
            </li>
            <li>
                <div class="axis"></div>
                <p class="limit" value="数据分析"><span class="icon iconfont icon-shujufenxi"></span>数据分析<i class="icon iconfont icon-top-s"
                        id="right"></i></p>
                <ul class="SLColumn">
                    <li>
                        <div class="axis"></div><a href="javascript:void(0)" id="market">市场统计</a>
                    </li>
                    <li>
                        <div class="axis"></div><a href="javascript:void(0)" id="wor">口碑统计</a>
                    </li>
                    <li>
                        <div class="axis"></div><a href="javascript:void(0)" id="employ">就业统计</a>
                    </li>
                    <li>
                        <div class="axis"></div><a href="javascript:void(0)" id="employrate">就业率统计</a>
                    </li>
                </ul>
            </li>
            <li>
                <div class="axis"></div><a href="javascript:void(0)" id="remind" class="limit" value="提醒功能"><span
                        class="icon iconfont icon-tixing"></span>提醒功能</a>
            </li>
        </ul>
    </nav>
    <iframe src="Market.html" frameborder="0" class="clear"></iframe>
</body>
<script src="./js/jquery-3.4.1.js"></script>
<script>
    $(".limit").parent().css("display","none");
    if(localStorage.getItem("login") != '1'){
        window.location = "Login.html";
    }
    $(".quit").on('click',function(){
        localStorage.setItem("login","0");
        localStorage.setItem("netAddress","");
        localStorage.setItem("pageAddress","");
        localStorage.schoolPageNum = "";
        localStorage.setItem("empId","");
        window.location = "Login.html";
    })
    //侧边栏显示
    
    var limit = JSON.parse(localStorage.getItem("stringData"));
    console.log(limit);
    $(".limit").each(function(i,v){
        for(var j=0;j<limit.result.length;j++){
            if($(".limit:eq("+i+")").attr("value") == limit.result[j].moduleName){
                $(".limit:eq("+i+")").parent().css("display","block");
            }
        }
    })
    var num = localStorage.getItem('pageAddress') || '0';
    var net = localStorage.getItem('netAddress') || './home.html';
    $('a:eq(' + num + ')').css({ background: '#3c9688', color: '#fff' });
    $('iframe').prop('src',net);
    $('li a').on('mouseover', function () {
        $(this).siblings('.axis').css('display', 'block');
    });
    $('li a').on('mouseout', function () {
        $(this).siblings('.axis').css('display', 'none');
    });
    $('a').on('click',function(){
        $(this).css({background:'#3c9688',color:'#fff'});
        $(this).parent().siblings('li').children('a').css({background:'#20222a',color:'rgb(204, 204, 204)'});
        $(this).parent().siblings('li').children('ul').children('li').children('a').css({background:'#20222a',color:'rgb(204, 204, 204)'});
        $(this).parent().parent().parent().siblings('li').children('a').css({background:'#20222a',color:'rgb(204, 204, 204)'});
    })
    $('a').each(function(i,v){
        $(this).on('click',function(){
            localStorage.setItem('pageAddress',i);
        })
    });
    $('li p').on('mouseover', function () {
        $(this).siblings('.axis').css('display', 'block');
    });
    $('li p').on('mouseout', function () {
        $(this).siblings('.axis').css('display', 'none');
    });
    var onOff = false;
    $('li p').on('click', function () {
        if (onOff) {
            $(this).siblings('ul').css('display', 'block');
            $(this).children('i').toggleClass('icon-top-s icon-below-s');
            onOff = !onOff;
        }
        else {
            $(this).siblings('ul').css('display', 'none');
            $(this).children('i').toggleClass('icon-top-s icon-below-s');
            onOff = !onOff;
        }
    })
    $("#school").on('click',function(){
        $('iframe').prop('src','./school.html');
        localStorage.setItem('netAddress',$("iframe").attr("src"));
    });
    $("#student").on('click',function(){
        $('iframe').prop('src','./student.html');
        localStorage.setItem('netAddress',$("iframe").attr("src"));
    });
    $("#home").on('click',function(){
        $('iframe').prop('src','./home.html');
        localStorage.setItem('netAddress',$("iframe").attr("src"));
    });
    $("#performance").on('click',function(){
        $('iframe').prop('src','./performance.html');
        localStorage.setItem('netAddress',$("iframe").attr("src"));
    });
    $("#remind").on('click',function(){
        $('iframe').prop('src','./Remind function.html');
        localStorage.setItem('netAddress',$("iframe").attr("src"));
    });
    $("#market").on('click',function(){
        $('iframe').prop('src','./Market.html');
        localStorage.setItem('netAddress',$("iframe").attr("src"));
    });
    $("#wor").on('click',function(){
        $('iframe').prop('src','./WOR.html');
        localStorage.setItem('netAddress',$("iframe").attr("src"));
    });
    $("#employ").on('click',function(){
        $('iframe').prop('src','./Employment.html');
        localStorage.setItem('netAddress',$("iframe").attr("src"));
    });
    $("#employrate").on('click',function(){
        $('iframe').prop('src','./EmploymentRate.html');
        localStorage.setItem('netAddress',$("iframe").attr("src"));
    });
</script>

</html>